<template>
	<view class="container">
		<top-back-navbar position="fixed" title="我的社区" background="#224f91" color="#ffff"></top-back-navbar>
		<view class="top-btn-group">
			<view class="top-btn-item" :class="[activeName == 1?'top-btn-item-active':'top-btn-item-import']" @click="handNav(1)">会飞的鸡蛋</view>
			<view class="top-btn-item" :class="[activeName == 2?'top-btn-item-active':'top-btn-item-import']" @click="handNav(2)">云养鸡</view>
		</view>
		<view style="padding:30rpx;">
			<view class="num_box">
				<view class="num_box-left">
					<view class="num_box-leftitem">ID号：{{resObj.my_id || 0}}</view>
					<view class="num_box-leftitem" style="margin-top: 30rpx;">级别：{{resObj.levelname}}</view>
				</view>
				<view class="num_box-right">
					<view class="num_box-right-num">¥{{(activeName == 1?resObj.self_performance:resObj.self_perf_26) || 0}}</view>
					<view class="num_box-right-text">自身业绩</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="jy-yj">
				<view class="jy-yj-title">业绩&交易</view>
				<view class="jy-yj-list">
					<view class="jy-yj-item">
						<view class="list-title">{{activeName == 1?'会飞的鸡蛋':'云养鸡'}}总业绩</view>
						<view class="list-num">¥{{(activeName == 1?resObj.z_all_yj:resObj.team_perf_26) || 0}}</view>
					</view>
					<view class="jy-yj-item border-left padding-left">
						<view class="list-title">{{activeName == 1?'分享业绩':'直推有效人数'}}</view>
						<view class="list-num">{{(activeName == 1?'¥'+resObj.zt_yj:resObj.vld_d1_26) || 0}}</view>
					</view>
				</view>
				<view class="jy-yj-list">
					<view class="jy-yj-item border-top">
						<view class="list-title">{{activeName == 1?'会飞的鸡蛋':'云养鸡'}}当日业绩</view>
						<view class="list-num">¥{{(activeName == 1?resObj.z_all_tody_yeji:resObj.daily_team_perf_26) || 0}}</view>
					</view>
					<view class="jy-yj-item border-left padding-left border-top">
						<view class="list-title">{{activeName == 1?'分享有效人数':'伞下有效人数'}}</view>
						<view class="list-num">{{(activeName == 1?resObj.zt_yx_num:resObj.vld_ds_26) || 0}}</view>
					</view>
				</view>
			</view>
			<view class="sale-group">
				<view class="sale-title">销售团队</view>
				<view v-for="(item, index) in user_list" :key="index">
					<view class="sale-list">
						<view class="sale-ids">
							<view class="sale-ids-left">
								<view class="sale-ids-index">{{item.id}}</view>
								<view class="sale-ids-btn">社区ID</view>
								<view class="sale-ids-id">{{item.mobile}}</view>
							</view>
							<view class="sale-ids-switch" v-if="activeName == 1">
								<min-switch :value="item.can_sell_child == 1?true:false" active-color="#ca2e25" inactive-color="#a9a7b7" @change="switchChange(item, index)"></min-switch>
							</view>
							<view class="sale-ids-switch" v-if="activeName == 2">
								<min-switch :value="item.has_child == 1?true:false" active-color="#ca2e25" inactive-color="#a9a7b7" @change="switchChange(item, index)"></min-switch>
							</view>
						</view>
						<view class="sale-peron">
							<view class="sale-peron-item" v-if="activeName == 1">无效会员：{{(item.all_ds-item.vld_ds) || 0}}人</view>
							<view class="sale-peron-item" v-if="activeName == 2">无效会员：{{(item.all_ds-item.vld_ds_26) || 0}}人</view>
							<view class="sale-peron-item">有效会员：{{activeName == 1?item.vld_ds:item.vld_ds_26}}人</view>
						</view>
						<view class="sale-yj">
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{activeName == 1?item.team_performance:item.self_perf_26}}</view>
								<view class="sale-yj-item-text">总业绩</view>
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{activeName == 1?item.daily_self_perf:item.daily_self_perf_26}}</view>
								<view class="sale-yj-item-text">当日业绩</view>
							</view>
							<view class="sale-yj-item" v-if="activeName == 1">
								<view class="sale-yj-item-money"></view>
								<view class="sale-yj-item-text" :class="[item.have_order == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{item.have_order == 1?'本人已下单':'本人未下单'}}</view>
							</view>
							<view class="sale-yj-item" v-if="activeName == 2">
								<view class="sale-yj-item-money"></view>
								<view class="sale-yj-item-text" :class="[item.paid_flag_26 == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{item.paid_flag_26 == 1?'本人已下单':'本人未下单'}}</view>
							</view>
						</view>
					</view>
					<view class="sale-list sale-list-jt" v-for="(val,key) in item.childer" :key="index+'-'+key">
						<view class="sale-ids">
							<view class="sale-ids-left">
								<view class="sale-ids-index">{{val.id}}</view>
								<view class="sale-ids-btn">社区ID</view>
								<view class="sale-ids-id">{{val.mobile}}</view>
							</view>
							<view class="sale-ids-switch"></view>
						</view>
						<view class="sale-peron">
							<view class="sale-peron-item" v-if="activeName == 1">无效会员：{{(val.all_ds-val.vld_ds) || 0}}人</view>
							<view class="sale-peron-item" v-if="activeName == 2">无效会员：{{(val.all_ds-val.vld_ds_26) || 0}}人</view>
							<view class="sale-peron-item">有效会员：{{activeName == 1?val.vld_ds:val.vld_ds_26}}人</view>
						</view>
						<view class="sale-yj">
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{activeName == 1?val.team_performance:val.self_perf_26}}</view>
								<view class="sale-yj-item-text">总业绩</view>
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{activeName == 1?val.daily_self_perf:val.daily_self_perf_26}}</view>
								<view class="sale-yj-item-text">当日业绩</view>
							</view>
							<view class="sale-yj-item" v-if="activeName == 1">
								<view class="sale-yj-item-money"></view>
								<view class="sale-yj-item-text" :class="[val.have_order == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{val.have_order == 1?'本人已下单':'本人未下单'}}</view>
							</view>
							<view class="sale-yj-item" v-if="activeName == 2">
								<view class="sale-yj-item-money"></view>
								<view class="sale-yj-item-text" :class="[val.paid_flag_26 == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{val.paid_flag_26 == 1?'本人已下单':'本人未下单'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import minSwitch from '@/components/min-switch.vue'
	export default {
		components: {
			minSwitch,
		},
		data() {
			return {
				user_list: [],
				res2: [],
				res3: [],
				res4: [],
				openid: '',
				real_name: '',
				real_head_img: '',
				create_time: '',
				resObj: {},
				activeName:1
			}
		},
		onLoad: function() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setajax()
				},
			});
		},
		methods: {
			handNav(flag){
				this.activeName=flag;
				this.setajax()
			},
			copyText(text) {
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			setajax() {
				uni.request({
					url: this.$BASE_URL+`/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=${this.activeName == 1?'member.mycommunity':'member.eggcommunity'}&app=1&type=1`,
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						let list=Array.isArray(res.data.user_list)?res.data.user_list:[];
						list.forEach(item=>{
							item.childer=[]
						})
						this.user_list = list;
						this.resObj = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			switchChange(item, index) {
				if(this.activeName == 1 && item.can_sell_child == 0)return;
				if(this.activeName == 2 && item.has_child == 0)return;
				uni.showLoading();
				this.$myRequest({
					url: `/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=${this.activeName == 1?'member.mycommunity':'member.eggcommunity'}&app=1&type=1`,
					method:'POST',
					data:{openid:item.openid}
				}).then(res=>{
					uni.hideLoading()
					let list=Array.isArray(res.data.user_list)?res.data.user_list:[];
					if(list.length == 0)return uni.showToast({title:'暂无间推数据！',icon:'none'})
					this.user_list[index].childer = list;
				})
			},
			// 二级滑块 滑块点击
			switchChange1(e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.code == 999) {
								uni.navigateTo({
									url: '/pages/999/999'
								})
							};
							this.res3 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res3 = []
					this.res4 = []
				}
			},
			// 三级滑块点击
			switchChange2(e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.code == 999) {
								uni.navigateTo({
									url: '/pages/999/999'
								})
							};
							this.res4 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res4 = []
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f5fa;
	}
	.top-btn-group{
		padding:30rpx 30rpx 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.top-btn-item{
			width: 48%;
			height: 90rpx;
			line-height: 72rpx;
			text-align: center;
			color:#fff;
			font-size: 32rpx;
		}
		.top-btn-item-import{
			background: url('/static/images/home/hfdd_top_btn.png') center no-repeat;
			background-size: 100% 100%;
		}
		.top-btn-item-active{
			background: url('/static/images/home/hfdd_top_btn_active.png') center no-repeat;
			background-size: 100% 100%;
		}
	}
	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

	.content {
		padding:0 30rpx 30rpx 30rpx;
	}

	.num_box {
		padding: 40rpx 30rpx;
		background: #224f91;
		display: flex;
		align-items: center;
		border-radius: 26rpx;
		.num_box-left {
			width: 35%;
			.num_box-leftitem {
				height: 64rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: #a9a7b7;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}

		.num_box-right {
			width: 65%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.num_box-right-text {
			font-size: 28rpx;
			color: #ffffff;
		}

		.num_box-right-num {
			font-size: 50rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	.jy-yj {
		padding: 0 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
		margin-top: 30rpx;

		.jy-yj-title {
			padding: 20rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			border-bottom: 1px solid #e0e0e0;
		}

		.jy-yj-list {
			display: flex;
			align-items: center;

			.jy-yj-item {
				width: 50%;
				padding: 10rpx 0;
				line-height: 30rpx;

				.list-title {
					padding: 10rpx 0;
					font-size: 32rpx;
					color: #7f7f80;
				}

				.list-num {
					padding: 10rpx 0;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.border-left {
				border-left: 1px solid #e0e0e0;
			}

			.border-top {
				border-top: 1px solid #e0e0e0;
			}

			.padding-left {
				padding-left: 40rpx;
			}
		}
	}

	.sale-group {
		margin-top: 30rpx;

		.sale-title {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.sale-list-jt{
			background-color: #ece7d9!important;
		}
		
		.sale-list {
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
			margin-bottom: 30rpx;

			.sale-ids {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.sale-ids-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.sale-ids-index {
						font-weight: bold;
					}

					.sale-ids-btn {
						padding: 0 20rpx;
						border-radius: 6rpx;
						border: 1px solid #7e7e80;
						background-color: #e7ebf5;
						color: #7e7e80;
						margin-left: 20rpx;
					}

					.sale-ids-id {
						color: #7e7e80;
						margin-left: 20rpx;
					}
				}
				.sale-ids-switch{
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}
			}
			.sale-ids-switch-active{
				color:#32539b!important;
			}
			.sale-ids-switch-inactive{
				color:#888!important;
			}
			.sale-peron {
				display: flex;
				align-items: center;
				padding-top: 20rpx;

				.sale-peron-item {
					width: 33.33%;
					font-size: 28rpx;
					color: #7e7e80;
				}
			}

			.sale-yj {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.sale-yj-item {
					width: 33.33%;
					font-size: 28rpx;

					.sale-yj-item-money {
						color: #da433d;
						min-width: 1px;
						min-height: 50rpx;
					}

					.sale-yj-item-text {
						margin-top: 8rpx;
						color: #7e7e80;
					}
				}
			}
		}
	}
</style>
